import React from 'react';

class CommentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            commentList: [],
        };
    }

    componentDidMount() {
        // 发送请求获取数据
        setInterval(() => {
            this.setState({
                commentList: [
                    {
                        msg: '这篇文章写的太好了',
                        author: 'Amy',
                    },
                    {
                        msg: 'React 是一个伟大的作品。',
                        author: 'Jon',
                    },
                    {
                        msg: 'Vue 是一个完美的效率框架。',
                        author: 'You',
                    },
                ],
            });
        }, 1000);
    }

    render() {
        return (
            <div className="comment-list">
                {this.state.commentList.map((item, index) => {
                    return <Comment key={index} {...item} />;
                })}
            </div>
        );
    }
}

// 复用场景比较多
// 存在优化点，容器

// 容器组件 、显示组件
// class Comment extends React.PureComponent {
// 生命周期
// constructor(props) {
// super(props);
// console.log(props);
// }

// shouldComponentUpdate(props) {
//     if (
//         props.msg === this.props.msg &&
//         props.author === this.props.author
//     ) {
//         return false;
//     }

//     return true;
// }

//     render() {
//         console.log('render');
//         return (
//             <div>
//                 <p>{this.props.msg}</p>
//                 <p>{this.props.author}</p>
//             </div>
//         );
//     }
// }

const Comment = (props) => {
    console.log('render');
    return (
        <div>
            <p>{props.msg}</p>
            <p>{props.author}</p>
        </div>
    );
};

export default CommentList;
